<template>
	<view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === item.state}" @click="tabClick(item.state)">
				{{item.text}}
			</view>
		</view>
		<view v-if="affiliateCommission && affiliateCommission.length>0">
			<view class="item" v-for="(commission,index) in affiliateCommission" :key="index">
				<view>订单ID：{{ commission.orderId }}</view>
				<view>分销等级：{{ _level(commission.relationLevel) }}</view>
				<view>佣金金额：{{ commission.commissionAmount }}</view>
				<view>状态：{{ _auditState(commission.state) }}</view>
				<view>结算时间：{{ commission.settlementTime }}</view>
			</view>
		</view>
		<view v-else>
			<no-data-page></no-data-page>
		</view>

	</view>
</template>

<script>
	import {
		isNull
	} from '@/lib/java110/utils/StringUtil.js';
	import {
		queryAffiliateCommission
	} from "../../api/affiliate/affiliateApi";

	import noDataPage from '../../components/no-data-page/no-data-page.vue';

	export default {
		data() {
			return {
				isApply: false,
				apply: false,
				affiliateCommission: [],
				navList: [{
						state: '',
						text: '全部订单'
					},
					{
						state: '0',
						text: '待结算'
					},
					{
						state: '1',
						text: '已结算'
					}
				],
				tabCurrentIndex: ''
			}
		},
		components: {
			noDataPage
		},
		async onLoad() {
			await this.queryAffiliateCommission();
		},
		methods: {
			async tabClick(e) {
				this.tabCurrentIndex = e;
				await this.queryAffiliateCommission();
			},
			async queryAffiliateCommission() {
				this.affiliateCommission = [];
				let param = {
					page: 1,
					row: 20,
					state: this.tabCurrentIndex
				};
				try {
					const data = await queryAffiliateCommission(param);
					this.affiliateCommission = data.data || [];
				} catch (error) {
					console.error('获取分销订单数据出错:', error);
				}
			},

			_level: function(_state) {
				if (_state == "1") {
					return "一级"
				}
				if (_state == "2") {
					return "二级"
				}
			},

			_auditState: function(_state) {
				if (_state == "0") {
					return "待结算"
				}
				if (_state == "1") {
					return "已结算"
				}
				if (_state == "2") {
					return "已取消"
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #333333;
			position: relative;

			&.current {
				color: #fa436a;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #fa436a;
				}
			}
		}
	}

	.item {
		margin: 20upx;
		border-radius: 10upx;
		padding: 30rpx 20rpx;
		background-color: white;

		view {
			padding: 10rpx;
			color: #666;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>